<template>
  <view class="service-list-container">
    <view class="service-header">
      <text class="header-title">全部服务</text>
    </view>
    
    <view class="service-categories">
      <view class="category-item" v-for="(category, index) in categories" :key="index" @click="selectCategory(category)">
        <text :class="['category-text', currentCategory === category.id ? 'active' : '']">{{ category.name }}</text>
      </view>
    </view>
    
    <view class="service-items">
      <view class="service-item" v-for="(item, index) in filteredServices" :key="index" @click="navigateToService(item)">
        <view class="service-icon">
          <image :src="item.icon" mode="aspectFit"></image>
        </view>
        <view class="service-info">
          <view class="service-name">{{ item.name }}</view>
          <view class="service-desc">{{ item.description }}</view>
          <view class="service-price">
            <text class="price">¥{{ item.price }}</text>
            <text class="unit">起</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 服务分类
const categories = ref([
  { id: 0, name: '全部' },
  { id: 1, name: '美容' },
  { id: 2, name: '寄养' },
  { id: 3, name: '医疗' },
  { id: 4, name: '训练' }
]);

// 当前选中的分类
const currentCategory = ref(0);

// 所有服务列表
const allServices = ref([
  {
    id: 1,
    categoryId: 1,
    name: '上门美容',
    description: '专业宠物美容师上门服务',
    price: 199,
    icon: '/static/images/pet/service-grooming.png',
    path: '/pages/pet/service/grooming'
  },
  {
    id: 2,
    categoryId: 1,
    name: '到店美容',
    description: '专业设备，舒适环境',
    price: 149,
    icon: '/static/images/pet/service-salon.png',
    path: '/pages/pet/service/salon'
  },
  {
    id: 3,
    categoryId: 2,
    name: '宠物寄养',
    description: '安全舒适的寄养环境',
    price: 99,
    icon: '/static/images/pet/service-boarding.png',
    path: '/pages/pet/service/boarding'
  },
  {
    id: 4,
    categoryId: 2,
    name: '宠物托管',
    description: '日间照料，专人看护',
    price: 79,
    icon: '/static/images/pet/service-daycare.png',
    path: '/pages/pet/service/daycare'
  },
  {
    id: 5,
    categoryId: 3,
    name: '宠物体检',
    description: '全面健康检查',
    price: 299,
    icon: '/static/images/pet/service-checkup.png',
    path: '/pages/pet/service/checkup'
  },
  {
    id: 6,
    categoryId: 3,
    name: '疫苗接种',
    description: '预防疾病，保障健康',
    price: 199,
    icon: '/static/images/pet/service-vaccine.png',
    path: '/pages/pet/service/vaccine'
  },
  {
    id: 7,
    categoryId: 4,
    name: '基础训练',
    description: '培养良好习惯',
    price: 399,
    icon: '/static/images/pet/service-training.png',
    path: '/pages/pet/service/training'
  },
  {
    id: 8,
    categoryId: 4,
    name: '行为矫正',
    description: '解决宠物行为问题',
    price: 499,
    icon: '/static/images/pet/service-behavior.png',
    path: '/pages/pet/service/behavior'
  }
]);

// 根据分类筛选服务
const filteredServices = computed(() => {
  if (currentCategory.value === 0) {
    return allServices.value;
  } else {
    return allServices.value.filter(service => service.categoryId === currentCategory.value);
  }
});

// 选择分类
function selectCategory(category) {
  currentCategory.value = category.id;
}

// 导航到服务详情
function navigateToService(service) {
  uni.navigateTo({
    url: service.path
  });
}
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.service-list-container {
  padding: 20rpx;
  
  .service-header {
    padding: 20rpx 0;
    
    .header-title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
  
  .service-categories {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 20rpx 0;
    padding-bottom: 10rpx;
    
    .category-item {
      padding: 10rpx 30rpx;
      margin-right: 20rpx;
      white-space: nowrap;
      
      .category-text {
        font-size: 28rpx;
        color: #666;
        
        &.active {
          color: #ff6b00;
          font-weight: bold;
          position: relative;
          
          &::after {
            content: '';
            position: absolute;
            bottom: -10rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 40rpx;
            height: 4rpx;
            background-color: #ff6b00;
            border-radius: 2rpx;
          }
        }
      }
    }
  }
  
  .service-items {
    .service-item {
      display: flex;
      background-color: #ffffff;
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      .service-icon {
        width: 120rpx;
        height: 120rpx;
        background-color: #f5f5f5;
        border-radius: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 30rpx;
        
        image {
          width: 80rpx;
          height: 80rpx;
        }
      }
      
      .service-info {
        flex: 1;
        
        .service-name {
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }
        
        .service-desc {
          font-size: 26rpx;
          color: #999;
          margin-bottom: 20rpx;
        }
        
        .service-price {
          display: flex;
          align-items: baseline;
          
          .price {
            font-size: 32rpx;
            color: #ff6b00;
            font-weight: bold;
          }
          
          .unit {
            font-size: 24rpx;
            color: #999;
            margin-left: 4rpx;
          }
        }
      }
    }
  }
}
</style>